<template>
  <div>
    <span style="margin-left: 24px; font-size: 16px; opacity: 0.8;">构建历史</span>
    <div class="table-main-container table-scroll-x-auto">
      <a-table :columns="columns"
               :dataSource="rows"
               :pagination="pagination"
               :rowKey="(record, index) => {return index}"
               @change="getList"
               :scroll="{x: '100%'}"
               :loading="loading"
               size="middle">
        <!-- 流水ID -->
        <template slot="pipelineName" slot-scope="pipelineName">
          <span class="pointer" @click="$copy(pipelineName)" :title="pipelineName">{{ pipelineName }}</span>
        </template>
        <!-- 流程 -->
        <template slot="nodesList" slot-scope="nodesList">
          <arrow-steps :list="nodesList"></arrow-steps>
        </template>
        <!-- 操作 -->
        <template v-slot:action="record">
          <!-- 详情 -->
          <span class="span-blue pointer" @click="openDetail(record.pipelineUuid)">详情</span>
          <a-divider type="vertical"/>
          <!--MR-->
          <span class="span-blue pointer" @click="handleRecord(record)">MR</span>
        </template>
      </a-table>
    </div>
  </div>

</template>

<script>
  import ArrowSteps from './arrow-steps'
/**
 * 列
 */
const columns = [
  {
    title: '流水名称',
    key: 'pipelineName',
    dataIndex: 'pipelineName',
    ellipsis: true,
    scopedSlots: {customRender: 'pipelineName'},
    width: 200,
    sorter: (a, b) => a.pipelineName.localeCompare(b.pipelineName)
  },
  {
    title: '分支',
    dataIndex: 'branch',
    key: 'branch',
    ellipsis: true,
    width: 100,
  },
  {
    title: '流程',
    dataIndex: 'nodesList',
    key: 'nodesList',
    align: "center",
    ellipsis: true,
    scopedSlots: {customRender: 'nodesList'}
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
	export default {
		name: "build-history",

    components: {ArrowSteps},

    data() {
		  return {
		    loading: true,

        columns,

        rows: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showTotal: function(total) {
            return `共 ${total} 条`
          }
        },
      }
    },

    methods: {
		  getList() {
		    this.loading = true
        this.$api.getBuildHistoryList().then(({ data }) => {
          this.rows = data.data.historyVOList || []
          this.loading = false
        }).catch(() => {
          // this.loading = false
        })
      },
      openDetail(data){
		    console.log(data)
      },
      handleRecord(data){
		    console.log(data)
      },

    },

    mounted() {
		  this.getList()
    },

  }
</script>

<style scoped>

</style>
